<template>
	<view class="flex-col group_1">
		<view class="flex-col section_1" v-if="orderInfo && orderInfo.type != 'recharge'&& orderInfo.type != 'role'">
			<image src="/static/local/f9ca23eb45218e324ec476878fc42fee.png" class="image_2" />
			<view class="flex-row group_2">
				<text>{{address.name || '暂无地址'}}</text>
				<text class="text_2">{{address.phone_number}}</text>
			</view>
			<view class="flex-row group_3">
				<text class="text_3">{{address.province + address.city + address.area + address.detail}}</text>
			</view>
		</view>
		<view class="flex-row section_2">
			<block v-if="orderInfo && orderInfo.type != 'recharge'&& orderInfo.type != 'role'">
				<u-image :src="orderInfo.courseInfo.goods_thumb" :lazy-load="true" width="250" height="160"
					border-radius="8rpx" mode="aspectFill">
				</u-image>
				<view class="flex-col group_4">
					<text class="text_4">{{orderInfo.title}}</text>
					<text class="text_5">￥{{orderInfo.total_fee / 100}}</text>
				</view>
			</block>
			<block v-else>
				<view class="group_4_text">
					<text class="text_4">{{orderInfo.title}}</text>
					<text class="text_5">￥{{orderInfo.total_fee / 100}}</text>
				</view>
			</block>
		</view>
		<view class="flex-col section_3">
			<view class="justify-between group_5">
				<text class="text_6">订单信息</text>
				<text class="text_7">{{orderStatus(orderInfo.status)}}</text>
			</view>
			<view class="justify-between group_6">
				<view class="flex-row group_7">
					<text class="text_8">订单编号</text>
					<text class="text_9">{{orderInfo.order_no}}</text>
				</view>
				<view class="flex-col items-center text-wrapper" @tap="copy">
					<text>复制</text>
				</view>
			</view>
			<view class="flex-row group_8">
				<text class="text_11">下单时间</text>
				<view class="flex-col group_9">
					<text>{{orderTime}}</text>
				</view>
			</view>
			<view class="flex-row group_10">
				<text class="text_14">订单总价</text>
				<text class="text_15">￥{{orderInfo.total_fee / 100}}</text>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				orderInfo: {},
				address: {
					name: '',
					phone_number: '',
					province: '',
					city: '',
					area: '',
					detail: ''
				}
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		computed: {
			// 订单状态
			orderStatus() {
				return (status) => {
					switch (status) {
						case 1:
							return '待付款';
						case 2:
							return '已付款';
						case 3:
							return '退款审核中';
						case 4:
							return '已退款';
						case 5:
							return '退款中';
						case -1:
							return '已取消付款/退款';
						case -2:
							return '退款拒绝';
						case -3:
							return '退款失败';
					}
				}
			},
			// 订单时间
			orderTime() {
				if (!that.orderInfo) return ''
				let timeStr = that.orderInfo._add_time_str.slice(0, -3)
				return timeStr
			}
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				// 获取本地存储的订单信息
				that.orderInfo = vk.getStorageSync('order-detail');
				if (vk.pubfn.isNotNull(that.orderInfo.courseInfo.address_info)) {
					that.address = that.orderInfo.courseInfo.address_info
				}
			},
			// 复制订单号
			copy() {
				uni.setClipboardData({
					data: that.orderInfo.order_no,
					showToast: false,
					success: () => {
						this.$refs.uToast.show({
							title: '复制成功',
							type: 'success',
							duration: 1200
						})
					}
				})
			}
		},
		destroyed() {
			vk.removeStorageSync('order-detail');
		}
	}
</script>

<style lang="scss" scoped>
	.group_1 {
		padding: 20rpx 20rpx;
		flex: 1 1 auto;
		overflow-y: auto;
		height: 100vh;
		padding: 20rpx;
		background: #F5F5F5;

		.section_1 {
			padding: 35rpx 20rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 12rpx;
			position: relative;

			.image_2 {
				width: 44rpx;
				height: 52rpx;
				position: absolute;
				top: 50%;
				transform: translate(0, -50%);
			}

			.group_2 {
				padding: 0 70rpx;
				color: rgb(33, 33, 33);
				font-size: 28rpx;
				line-height: 34rpx;
				white-space: nowrap;

				.text_2 {
					margin-left: 33rpx;
				}
			}

			.group_3 {
				padding: 0 70rpx;
				color: rgb(102, 102, 102);
				font-size: 24rpx;
				line-height: 28rpx;

				.text_3 {
					margin-top: 12rpx;
					flex: 1 1 auto;
					text-align: left;
				}
			}
		}

		.section_2 {
			margin-top: 20rpx;
			padding: 32rpx 18rpx 32rpx 20rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 12rpx;

			.group_4 {
				margin-left: 26rpx;
				margin-bottom: 4rpx;
				flex: 1 1 auto;

				.text_4 {
					color: rgb(51, 51, 51);
					font-size: 30rpx;
					line-height: 35rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.text_5 {
					margin-left: 7rpx;
					margin-top: 43rpx;
					color: rgb(246, 21, 21);
					font-size: 36rpx;
					line-height: 43rpx;
					white-space: nowrap;
				}
			}

			.group_4_text {
				flex: 1 1 auto;
				display: flex;
				justify-content: space-between;

				.text_4 {
					color: rgb(51, 51, 51);
					font-size: 30rpx;
					line-height: 35rpx;
				}

				.text_5 {
					color: rgb(246, 21, 21);
					font-size: 36rpx;
					line-height: 43rpx;
					white-space: nowrap;
				}
			}
		}

		.section_3 {
			margin-top: 20rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 12rpx;

			.group_5 {
				padding: 33rpx 24rpx 31rpx 20rpx;
				font-weight: bold;

				.text_6 {
					color: rgb(33, 33, 33);
					font-size: 30rpx;
					line-height: 36rpx;
					white-space: nowrap;
				}

				.text_7 {
					color: rgb(255, 12, 12);
					font-size: 30rpx;
					line-height: 36rpx;
					white-space: nowrap;
				}
			}

			.group_6 {
				padding: 28rpx 20rpx 24rpx 30rpx;
				border-top: solid 2rpx rgb(245, 245, 245);
				border-bottom: solid 2rpx rgb(245, 245, 245);

				.group_7 {
					margin: 7rpx 0 6rpx;

					.text_8 {
						color: rgb(102, 102, 102);
						font-size: 28rpx;
						line-height: 34rpx;
						white-space: nowrap;
					}

					.text_9 {
						margin-left: 34rpx;
						color: rgb(33, 33, 33);
						font-size: 28rpx;
						line-height: 34rpx;
						white-space: nowrap;
					}
				}

				.text-wrapper {
					padding: 11rpx 0 9rpx;
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					line-height: 29rpx;
					white-space: nowrap;
					border-radius: 24rpx;
					background-image: url('/static/local/7aa0b96b5999998caaeda4fd65173f6f.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					width: 118rpx;
					height: 48rpx;
				}
			}

			.group_8 {
				padding: 32rpx 30rpx 32rpx;
				border-bottom: solid 2rpx rgb(245, 245, 245);

				.text_11 {
					color: rgb(102, 102, 102);
					font-size: 28rpx;
					line-height: 34rpx;
					white-space: nowrap;
				}

				.group_9 {
					margin-left: 34rpx;
					color: rgb(33, 33, 33);
					font-size: 28rpx;
					line-height: 34rpx;
					white-space: nowrap;
					width: 280rpx;
					position: relative;

					.text_13 {
						position: absolute;
						right: 0;
						top: 0;
					}
				}
			}

			.group_10 {
				padding: 34rpx 30rpx 30rpx;

				.text_14 {
					color: rgb(102, 102, 102);
					font-size: 28rpx;
					line-height: 34rpx;
					white-space: nowrap;
				}

				.text_15 {
					margin-left: 34rpx;
					color: rgb(33, 33, 33);
					font-size: 28rpx;
					line-height: 34rpx;
					white-space: nowrap;
				}
			}
		}
	}
</style>
